<template>
  <div>
    <el-card class="box-card">
      <div>
        <div class="contact">
          <span style="font-size: 20px">联系我</span>
          <el-image src="https://th.bing.com/th/id/Rfc3eaf1ab56a928ba2e504a94238b899?rik=YLvaU4jK8CI2BQ&riu=http%3a%2f%2fattachments.gfan.com%2fforum%2fattachments2%2f201309%2f12%2f152726nzc3p403ouo4ccav.jpg&ehk=YCekTZQfPlk%2bGycNBu%2f5m7i9PGJSwU05T%2f3VsrUp7CA%3d&risl=&pid=ImgRaw"></el-image>
        </div>
        <div>
          <span style="font-weight: normal;font-size: 13px;margin-right: 20px"></span>
          <span style="font-weight: normal;font-size: 13px;"></span>
        </div>
      </div>
      <div class="blog_details">
          <div class="article">
            <p style="font-size: 15px">文章</p>
            <p style="font-size: 20px">{{count.blogCount}}</p>
          </div>
          <div class="type">
            <p style="font-size: 15px">分类</p>
            <p style="font-size: 20px">{{count.TypeCount}}</p>
          </div>
          <div>
            <p style="font-size: 15px">标签</p>
            <p style="font-size: 20px">{{count.tagCount}}</p>
          </div>
      </div>
      <a class="my_gitee" href="https://gitee.com/weng-zewei" target="_blank" style="position: relative;">gitee</a>
    </el-card>
     <el-calendar v-model="value" style="position: relative; margin-top: 10px" id="el-calendar__header"   class="el-calendar-day el-calendar-table"></el-calendar>
    <!-- <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <span style="margin-right: 80px"><i class="el-icon-collection-tag"></i>标签云</span>
      </div>
      <div>
        <div>
          <div id="tagCloud" style="height: 300px;"></div>
        </div>
      </div>
    </el-card> -->
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
export default {
  data () {
    return {
      count: {},
      tags: []
    }
  },
  methods: {
    getCounts () {
      this.$axios.get('/blog/getCounts').then(response => {
        this.$set(this, 'count', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getTags () {
      this.$axios.get('/type/getPartTags').then(response => {
        this.$set(this, 'tags', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    initTagCloud () {
      const myChart = echarts.init(document.getElementById('tagCloud'))
      const option = {
        backgroundColor: '#F7F7F7',
        series: [{
          name: '标签云', // 数据提示窗标题
          type: 'wordCloud',
          sizeRange: [6, 66], // 画布范围，如果设置太大会出现少词（溢出屏幕）
          rotationRange: [-45, 90], // 数据翻转范围
          // shape: 'circle',
          textPadding: 0,
          left: 'center',
          top: 'center',
          width: '100%',
          height: '100%',
          right: 'center',
          bottom: 'center',
          autoSize: {
            enable: true,
            minSize: 6
          },
          textStyle: {
            normal: {
              color: function () {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')'
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: this.tags
        }]
      }
      myChart.setOption(option)
      // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () { myChart.resize() })
    }
  },
  created () {
    this.getCounts()
    this.getTags()
  },
  mounted () {
  },
  watch: {
    tags: {
      handler () {
        this.initTagCloud()
      },
      deep: true // true 深度监听
    }
  }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 300px;
}
.box-card .item:hover {
  color: #409EFF;
  cursor: pointer;
}
.box-card span {
  font-weight: bold;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.contact{
  text-align: center;
}
.blog_details{
  display: flex;
  text-align: center;
  margin-left: 10px;
}
.article{
  margin-right: 29%;
}
.type{
  margin-right: 29%;
}
.my_gitee{
  border-radius: 290486px;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #3273dc;
  border-color: transparent;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display:block;
}
.el-calendar__header{
   margin: 0% !important;
}
.el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    padding: 6px;
    height: 20px  !important;
}


.el-calendar-day {
    height: 15px !important;
    width: 300px;
} 
// .el-calendar__header {
//     display: flex;
//    // justify-content: space-between;
//     padding: 15px 12px !important;
//     border-bottom: 1px solid #EBEEF5;
// }
.el-calendar-table .el-calendar-day {
    height: 35px !important;
}
#el-calendar__header {
    padding: 0px 5px;
    width: 315px !important;
    margin: -10px 15 !important;
    padding-top: 8px !important;
    padding-bottom: 42px;
}
</style>
